<template>
  <div class="mask-black-dialog newui-part" v-if="bdTag">
    <div class="m-bd uploadAni" :style="styletemp" :class="clazzAll">
      <div class="bd-header">
        <span>{{title || '提示'}}</span>
        <Icon class="close" @click="closebd()" size="30" type="ios-close" />
      </div>
      <div class="bd-content" :class="clazzName" :style="stylecontent">
        <slot></slot>
      </div>
      <div class="bd-foot">
        <template v-if="!hidefoot">
          <Button @click="closebd()"  type="primary">确定</Button>
          <Button @click="closebd()"  v-if="!onlyTag">取消</Button>
        </template>
        <slot name="footer"></slot>
      </div>
    </div>
    <div class="mask" @click="closebd()"></div>
  </div>
</template>

<script>

export default {
  props: ['clazzName', 'title', 'bdTag', 'onlyTag', 'hidefoot', 'styletemp', 'clazzAll', 'stylecontent'],
  data: function () {
    return {
    }
  },
  methods: {
    closebd () {
      this.$emit('update:bdTag', false)
    }
  },
  created () {
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
.mask-black-dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  overflow: auto;
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
  }
}

@keyframes myshow {
  from {
    transform: scale(0, 0);
  }
  to {
    transform: scale(1, 1);
  }
}

.m-bd {
  position: relative;
  margin :15vh auto 50px;
  width: 560px;
  background: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  animation: myshow 0.5s;
  border-radius: 6px;
  box-sizing: border-box;
  overflow :hidden;
  z-index: 20;
}

.bd-width-one {
  width: 450px;
}

.bd-header {
  padding: 20px;
  padding-bottom: 10px;
  height: 40px;
  border-radius: 6px 6px 0 0;
  line-height: 40px;
  display :flex;
  justify-content :space-between;
  align-items: center;
  font-size: 18px;
  color: #303133;
  .close {
    width :14px;
    height :14px;
    cursor: pointer;
    // background :url('~common/image/new/close.png') no-repeat center;
  }
}

.bd-content {
  padding: 30px 18px 8px;
  background-color: #ffffff;
}
.data-input {
  padding: 18px 18px 8px;
}

.bd-foot {
  padding: 0 18px 24px;
  text-align :right;
  background-color: #ffffff;
  border-radius: 0 0  6px 6px;
  button {
    text-align :center;
  }
}
.uploadAni{
  will-change :transform;
}
</style>
